<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/hall.css">
    <link rel="stylesheet" href="css/myStore.css">
</head>
<body>
<div class="nav">
    <span class="nav">电子物品交易</span>
    <div class="search-container">
        <input id="search" type="text"  placeholder="">
        <button class="search-button" type="submit" onclick="search()" style="cursor: pointer">搜索</button>
        <div class="search-tip" data-spm="searchActivate" style="display: flex;">
            <a class="search-item" target="_self" href="#">这里放热搜</a>
            <a class="search-item" target="_self" href="#">热搜1</a>
            <a class="search-item" target="_self" href="#">热搜1</a>
            <a class="search-item" target="_self" href="#">热搜1</a>
            <a class="search-item" target="_self" href="#">热搜1</a>
            <a class="search-item" target="_self" href="#">热搜1</a>
            <a class="search-item" target="_self" href="#">热搜1</a>
            <a class="search-item" target="_self" href="#">热搜1</a>
            <a class="search-item" target="_self" href="#">热搜1</a>
            <a class="search-item" target="_self" href="#">热搜1</a>
        </div>
    </div>

    <div data-spm="nav" class="op-container" id="op-container" style="display: none;">
        <a class="item-button" href="#" style="display: flex; align-items: center;">
            <img src="image/cart.svg" style="object-fit: contain; width: 24px; height: 24px; margin-right: 4px;">
            <div style="margin-right: 16px;">购物车</div>
        </a>
        <a class="item-button" href="#"   style="display: flex; align-items: center;">
            <img src="image/order.svg" style="object-fit: contain; width: 24px; height: 24px; margin-right: 4px;">
            <div style="margin-right: 16px;">订单</div>
        </a>
        <a class="item-button" id="store-op" href="myStore.html"   style="display: flex; align-items: center;">
            <img src="image/store.svg" style="object-fit: contain; width: 24px; height: 24px; margin-right: 4px;">
            <div style="margin-right: 16px;">小店</div>
        </a>
        <a class="item-button user" href="#"   style="display: flex; align-items: center;">
            <img src="image/tx.jpg" style="object-fit: contain; width: 50px; height: 50px; margin-right: 10px; border-radius: 50%;">
            <div id="name" style="margin-right: 16px; font-size: 20px">null</div>
        </a>
    </div>
    <div data-spm="nav" class="op-container" id="login">
        <a class="item-button" href="login.html"   style="display: flex; align-items: center;">
            <div style="margin-right: 16px;">登录</div>
        </a>
        <a class="item-button" href="register.html"   style="display: flex; align-items: center;">
            <div style="margin-right: 16px;">注册</div>
        </a>
    </div>
    <div data-spm="nav" class="op-container" id="logout" style="display: none;">
        <div class="item-button" onclick="logout()"  style="display: flex; align-items: center;">
            <div style="margin-right: 16px; cursor: pointer">退出登录</div>
        </div>
    </div>

    <div class="user-info user" id="user-info" style="display: none;">
        <div class="row" hidden >
            <img src="image/tx.jpg" style="object-fit: contain; width: 50px; height: 50px; margin-right: 10px; border-radius: 50%;">
            <div id="userName" onclick="updateName()" style="margin-right: 16px; font-size: 20px">null</div>
            <div class="updateName" style="margin-right: 16px; font-size: 20px; display: none;">
                <input id="newName" style="margin-right: 16px; font-size: 20px; width: 100px">
                <button type="submit" onclick="postName()" style="margin-right: 16px; font-size: 20px;">确定</button>
            </div>
        </div>
        <div class="row">
            <span>电话：</span>
            <div id="phone" style="margin-right: 16px; font-size: 20px">null</div>
        </div>
        <div class="row">
            <span>邮箱：</span>
            <div id="email" style="margin-right: 16px; font-size: 20px">null</div>
        </div>
        <div class="row">
            <span>用户类型：</span>
            <div id="userType" style="margin-right: 16px; font-size: 20px">null</div>
        </div>
        <div class="row">
            <span>性别：</span>
            <select id="gender" style="margin-right: 16px; font-size: 20px;" >
                <option id="man" value="男">男</option>
                <option id="woman" value="女">女</option>
            </select>
        </div>
        <div class="row">
            <span>年龄：</span>
            <select id="age" style="margin-right: 16px; font-size: 20px;">
                <!-- 使用 JavaScript 动态生成 0 到 100 的选项 -->
            </select>
<!--            <div id="age" style="margin-right: 16px; font-size: 20px">null</div>-->
<!--            <input id="newAge" type="number" style="height: 30px; width: 50px; font-size: 20px;">-->
        </div>
        <div class="row">
            <a id="updateUser" class="row" href="updateUser.html" style="margin-right: 16px; font-size: 20px;">
                修改密码
            </a>
            <a id="address" class="row" href="userAddress.html" style="margin-right: 16px; font-size: 20px; padding-left: 10px">
                收获地址
            </a>
        </div>
    </div>

</div>


<div class="store-container">

    <div class="stores" id="stores">
<!--        <a class="store" href="#">-->
<!--            <img class="store-image" src="image/tx.jpg" >-->
<!--            <div class="store-name" >这是商品名</div>-->
<!--            <div class="store-introduction">这里是一行描述</div>-->
<!--        </a>-->

        <div class="store">
            <a class="store-info" href="product.html?productId=${product.productId}">
                <img class="store-image" src="image/tx.jpg" >
                <div class="store-name" >这是商品名</div>
                <div class="store-stock" >剩余:18 </div>
                <div class="store-introduction" style="margin-left: 10px">这是描述</div>
            </a>
            <div class="store-op">
                <span onclick="" style="color: blue; cursor: pointer">购买</span>
                <span onclick="" style="color: blue; cursor: pointer">+购物车</span>
            </div>
        </div>
    </div>
    <div class="page-op">
        <button onclick="prevPage()">上一页</button>
        <span id="page">0/0</span>
        <button onclick="nextPage()">下一页</button>
    </div>

</div>

<script src="js/jquery.min.js"></script>
<script src="js/user.js"></script>
<script src="js/product.js"></script>
<script>
    let userId = localStorage.getItem("userId");
    console.log(userId);
    let currentPage = 1;
    let pageSize = 7;
    let pageCount = 1;

    $(document).ready(function() {
        //查询页面数量
        selectMaxPage();
        console.log("pageCount= " + pageCount);
        //查询并展示在售商品
        selectProductByStatus("上架", currentPage, pageSize, showProduct);

        //查询用户信息并刷新页面用户信息
        selectUserById(userId, flushUser);

        //为用户信息绑定悬浮事件
        const $aTag = $('.user');
        const $userInfo = $('#user-info');
        let hideTimer;

        $aTag.on('mouseover', function () {
            clearTimeout(hideTimer);
            $userInfo.show();
        });

        $userInfo.on('mouseover', function () {
            clearTimeout(hideTimer);
        });

        $(document).on('mouseout', function (e) {
            const relatedTarget = $(e.relatedTarget);
            if (!relatedTarget.closest($aTag).length && !relatedTarget.closest($userInfo).length) {
                hideTimer = setTimeout(() => {
                    $userInfo.hide();
                }, 200);
            }
        });


        //更新页面用户信息
        function flushUser(userInfo) {
            if(userInfo != null) {
                $('#login').hide();
                $('#op-container').show();
                $('#name').text(userInfo.name);
                $('#userName').text(userInfo.name);
                $('#phone').text(userInfo.phone);
                $('#email').text(userInfo.email);
                $('#userType').text(userInfo.userType);
                $('#gender').val(userInfo.gender);
                $('#age').val(userInfo.age);
                if(userInfo.userType != "商家") {
                    $('#store-op').hide();
                }

                $('#logout').show();

            }
        }

    });
    function logout() {
        $.ajax({
            type: 'get',
            url: '/user/logout',
            success: function (data) {
                location.reload();
            }
        });
    }
    function search() {
        selectMaxPage();
        let words = $('#search').val();
        selectByStatusAndWords("上架", words, currentPage, pageSize, showProduct);
    }

    function nextPage() {
        let words = $('#search').val();
        console.log(words);
        if(currentPage === pageCount) {
            alert("已经是最后一页了");
        }else{
            selectByStatusAndWords("上架", words, ++currentPage, pageSize, showProduct);
            // selectProductByStatus("上架", ++currentPage, pageSize, showProduct);
        }
    }
    function prevPage() {
        let words = $('#search').val();
        console.log(words);
        if(currentPage === 1) {
            alert("已经是第一页了");
        }else{
            selectByStatusAndWords("上架", words, --currentPage, pageSize, showProduct);
            // selectProductByStatus("上架", --currentPage, pageSize, showProduct);
        }
    }

    function selectMaxPage() {
        let words = $('#search').val();
        console.log(words);
        //查询数据页数
        pageCount = selectPageCountOfStatusAndWords("上架", words, pageSize).then(totalPages => {
            pageCount = totalPages
            $('#page').text(currentPage + "/" + pageCount);
        }).catch(error => {
            console.error('请求失败:', error);
        });
    }

    //拼接商品展示html
    function showProduct(products) {
        const pbox = $('#stores');
        pbox.empty();
        for (product of products) {
            let newElement = `
                            <div class="store">
                                <a class="store-info" href="product.html?productId=${product.productId}">
                                    <img class="store-image" src="image/tx.jpg" >
                                    <div class="store-name" >${product.brand}${product.productName}${product.model}</div>
                                    <div class="store-stock" >剩余：${product.stock}</div>
                                    <div class="store-introduction" style="margin-left: 10px">${product.description}</div>
                                </a>
                                <div class="store-op">
                                    <span onclick="" style="color: blue; cursor: pointer">购买</span>
                                    <span onclick="" style="color: blue; cursor: pointer">+购物车</span>
                                </div>
                            </div>`;
            pbox.append(newElement);
        }
        $('#page').text(currentPage + "/" + pageCount);
    }

    // 动态生成年龄下拉框选项
    const $ageSelect = $('#age');
    for (let i = 0; i <= 100; i++) {
        $ageSelect.append(`<option value="${i}">${i}</option>`);
    }

    // 为性别 select 元素添加值改变事件处理函数
    $('#gender').change(function () {
        const selectedGender = $(this).val();
        // updateUserGenderById(userId, selectedGender);
        updateUserFieldById(userId,"gender", selectedGender);
    });

    // 为年龄 select 元素添加值改变事件处理函数
    $('#age').change(function () {
        let selectedAge = $(this).val();
        //更新age
        // updateUserAgeById(userId, selectedAge);
        updateUserFieldById(userId,"age", selectedAge);
    });

    //修改昵称
    function updateName() {
        //点击后显示输入框进行修改
        $('#userName').hide();
        $('#newName').val($('#userName').text());
        $('.updateName').show();
    }
    //上传修改的数据并恢复页面
    function postName() {
        updateUserFieldById(userId, "name", $('#newName').val())
        //还原页面并刷新
        $('.updateName').hide();
        $('#userName').show();
        location.reload();
    }
</script>
</body>
</html>